<template>
  <div class="recom">
    <div class="recom-item" v-for="(item, index) in toplist" :key="index">
      <div class="recom-img">
        <img :src="item.coverImgUrl" alt="" />
        <span class="recom-img-text">{{ item.updateFrequency }}</span>
      </div>
      <div class="recom-music">
        <span v-for="(song, iindex) in songs[index]" 
        :key="iindex">
        {{iindex+1}}. {{song.name}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { debounce } from "components/common/debounce/debounce";

import { reqTopList, reqListDetail } from "api/api.js";

export default {
  name: "Recom",
  data() {
    return {
      toplist: [],
      detail: [],
    };
  },
  computed: {
    songs() {
      let data = [];
      if (this.detail) {
        this.detail.forEach((item) => {
          data.push(item.songs.slice(0, 3));
        });
      }
      return data;
    },
  },
  mounted() {
    this.reqTopList();
  },
  methods: {
    reqTopList: debounce(function dreqTopList() {
      reqTopList().then((res) => {
        this.toplist = res.list;
        this.reqListDetail();
      });
    }, 600),
    reqListDetail() {
      this.toplist.forEach((item) => {
        reqListDetail(item.id).then((res) => {
          this.detail.push(res);
        });
      });
      console.log(this.detail);
    },
  },
};
</script>

<style lang="less" scoped>
.recom-item {
  display: flex;
  position: relative;
  height: 118px;
  margin: 30px;
  .recom-img {
    img {
      width: 118px;
      height: 118px;
      border-radius: 12px;
      vertical-align: middle;
    }
    .recom-img-text {
      position: absolute;
      left: 12px;
      bottom: 10px;
      color: #fff;
      font-size: 12px;
      font-style: oblique;
    }
  }
  .recom-music {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    margin-left: 18px;

    span {
      overflow: hidden;
      width: 180px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>